<template>
  <div class="recycle-manage">
    <search-form-table :url="url" ref="searchtable" :form="form" :columns="columns">

      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="商品名称">
            <a-input
              v-decorator="[
                'goodsName',
              ]"
              placeholder="请输入商品名称"
            >
            </a-input>
          </a-form-item>

      <!--    <a-form-item label="商品分类">
            <a-cascader
              :fieldNames="{label: 'className', value: 'id', children: 'children'}" 
              allowClear
              :show-search="{ filter:filterType }"
              autocomplete="off"
              style="width: 300px"
              :options="cateTree"
              placeholder="请选择商品分类"
              v-decorator="[
                'goodsClassificationId',
              ]"
            />
          </a-form-item>-->
          <a-form-item label="商品分类">
            <a-tree-select
              allowClear
              style="width:180px"
              :replaceFields="{children:'children', title:'classifyName', key:'id', value: 'id' }"
              v-decorator="[
                'goodsClassificationId',
              ]"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="cateTree"
              placeholder="请选择"
              tree-default-expand-all
            >
              <span slot="title" slot-scope="{ key, value }">
                  {{ value }}
              </span>
            </a-tree-select>
          </a-form-item>

        </a-form>
      </template>

      <template slot="oprationRow">
        <permission authority="">
          <a-button @click="oprationRows($refs.searchtable.selectedRowKeys, 1)" type="primary" icon="delete">还原</a-button>
        </permission>
        <permission authority="">
          <a-button @click="oprationRows($refs.searchtable.selectedRowKeys, 0)" type="danger" icon="delete">删除</a-button>
        </permission>
      </template>

      <template slot="tableOperation" slot-scope="{record}">
        <permission authority="">
          <span class="text-success pointer" @click="restoreRows([record.id])">还原</span>
        </permission>

        <permission authority="">
          <a-divider type="vertical" />
          <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
      </template>

    </search-form-table>
  </div>
</template>
<script>
import {setLastChildrenNull} from '@/utils'

import SearchFormTable from "./SearchTable";

export default {
  name: 'recycle-manage',
  components:{
    SearchFormTable
  },
  data () {
    return {
      url: '/goods/recycle/page',
      infoVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
   /*   productTypeOptions: [
        {label: '手机', value: 1},
        {label: '平板', value: 2},
      ],*/
      // 商品分类
      cateTree: [],
      columns:  [
        {
          title: '回收编号',
          dataIndex: 'id',
          key:'id'
        },
        {
          title: '商品图片',
          dataIndex: 'goodsPicture',
          key:'goodsPicture',
          // customRender:  (text)=> return {<table-img src={text} />}
          customRender: (text, row) => {
            // console.log("text", text);
            return <table-img src={text}/>;
          }
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key:'goodsName'
        },
        {
          title: '商品分类',
          dataIndex: 'goodsClassificationName',
          key: 'goodsClassificationName',
        },
        {
          title: '价格',
          dataIndex: 'salePrice',
          key: 'salePrice',
          customRender: text=> +text && +(text / 100).toFixed(2) +'元' || ''
        },
        {
          title: 'ERP编号',
          dataIndex: 'erpCode',
          key: 'erpCode'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: {customRender: 'operation'}
        }
        ]
    }
  },
  mounted () {
    //
    this.getProductCates()
  },
  methods:{

    filterType(inputValue, path) {
      return path.some(option => option.className.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    // 获取全部商品分类
    getProductCates () {
      this.$get('/goods/classify/tree', {}, {preventLoading: true}).then(res => {
        if (res && res.returnCode === 1000) {
          console.log('商品分类:', res)
          this.cateTree = setLastChildrenNull(res.dataInfo) || []
          // this.cateTree = res.dataInfo
          console.log('this.cateTree',this.cateTree)
        }
      })
    },

    // 批量还原  与批量删除  分开来写、、。、、、、、、、
    oprationRows (ids, operation) {
      if (!(ids && ids.length)) return this.$message.warn('请先选择一项后再进行操作')
      const text = {
        1: '请确认是否还原？',
        0: '请确认是否删除？',
      }
      if (operation===1){
        this.$confirm({
          title: '提示',
          content: text[operation],
          okText: '确认',
          cancelText: '取消',
          onOk: ()=> {
            this.$post('/goods/recycle/reduction', {ids, operation}).then(res => {
              if (res && res.returnCode == 1000) {
                this.$message.success('操作成功')
                this.$refs.searchtable.refreshTable()
              }
            })
          }
        })
      }
      else {
        this.$confirm({
          title: '提示',
          content: text[operation],
          okText: '确认',
          cancelText: '取消',
          onOk: ()=> {
            this.$post('/goods/recycle/delete', {ids, operation}).then(res => {
              if (res && res.returnCode == 1000) {
                this.$message.success('操作成功')
                this.$refs.searchtable.refreshTable()
              }
            })
          }
        })
      }

    },
    // 据ID还原
    restoreRows(id){
      console.log('恢复',id)
      // if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '还原提示',
        content: '商品即将还原至商品库 请确认是否还原？',
        okText: '确认还原',
        cancelText: '取消',
        onOk: () => {
          this.$post('/goods/recycle/reduction', {ids:id}).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('还原成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },
    // 据ID删除
    deleteRows(id){
      console.log('删除',id)
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: () => {
          this.$post('/goods/recycle/delete',{ids:id}).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    }
  }
}
</script>